<template>
	<view class="m-content" v-if="detail">
		<view class="m-h3">
			<view class="m-h3-left">
				<text>设施服务</text>
			</view>
		</view>
		<view class="u-flex u-flex-wrap">
			<view class="m-config-item">
				<image src="../../static/common/icon_louceng.png" mode=""></image>
				<view class="u-line-1 m-config-item-width">
					<text class="">{{detail.floor_count}}层</text>
				</view>
			</view>
			<view class="m-config-item" v-if="detail.is_has_elevator">
				<image src="../../static/common/icon_chuanghu.png" mode=""></image>
				<view class="u-line-1 m-config-item-width">
					<text class="">电梯</text>
				</view>
			</view>
			<view class="m-config-item"  v-if="detail.is_has_wifi">
				<image src="../../static/common/icon_wifi.png" mode=""></image>
				<view class="u-line-1 m-config-item-width">
					<text class="">免费WIFI</text>
				</view>
			</view>
			<view class="m-config-item" v-if="detail.is_has_parking && !detail.parking_price">
				<image src="../../static/common/icon_tingche.png" mode=""></image>
				<view class="u-line-1 m-config-item-width">
					<text class="">免费停车</text>
				</view>
			</view>
			<!-- <view class="m-config-item">
				<image src="../../static/common/icon_peoper.png" mode=""></image>
				<view class="u-line-1 m-config-item-width">
					<text class="">2人</text>
				</view>
			</view> -->
			<view class="m-config-item" v-if="detail.is_deposit">
				<image src="../../static/common/icon_xingli.png" mode=""></image>
				<view class="u-line-1 m-config-item-width">
					<text class="">行李寄存</text>
				</view>
			</view>
			<!-- <view class="m-config-item">
				<image src="../../static/common/icon_songcan.png" mode=""></image>
				<view class="u-line-1 m-config-item-width">
					<text class="">有早餐</text>
				</view>
			</view> -->
		</view>

		<view class="m-h3">
			<view class="m-h3-left">
				<text>住房必读</text>
			</view>
		</view>
		<view class="u-flex u-m-l-25">
			<view class="m-icon">
				<image src="../../static/common/icon_naozhong.png" mode=""></image>
			</view>
			<view class="m-font1">
				<text>入住时间：{{detail.start_time}}以后</text>
				<text class="u-m-l-20">离店时间：{{detail.leave_end_time}}以前</text>
			</view>
		</view>
		<view class="u-flex u-m-l-25 u-m-t-20">
			<view class="m-icon">
				<image src="../../static/common/icon_chongwu.png" mode=""></image>
			</view>
			<view class="m-font1">
				<text><text v-if="detail.is_with_pets===0">不</text>可携带宠物</text>
			</view>
		</view>
		<view class="m-cell u-border-top u-border-bottom u-m-t-30" @click="makePhoneCall(detail.marchant_tel)">
			<text>酒店电话：{{detail.marchant_tel}}</text>
			<u-icon name="phone-fill"></u-icon>
		</view>
		<!-- <view class="m-cell u-border-bottom">
			<text>酒店电话：0312-594552</text>
			<u-icon name="phone-fill"></u-icon>
		</view> -->


		<view class="m-h3">
			<view class="m-h3-left">
				<text>酒店介绍</text>
			</view>
		</view>
		<view class="u-flex u-m-l-25 u-m-r-25 m-font1">
			<view class="u-flex u-flex-1">
				<text>装修时间</text>
				<text class="u-m-l-10">{{detail.trim_time}}</text>
			</view>
			<view class="u-flex u-flex-1">
				<text>开业时间</text>
				<text class="u-m-l-10">{{detail.open_time}}</text>
			</view>
		</view>
		<view class="u-flex u-m-l-25 u-m-r-25 m-font1 u-m-t-15">
			<view class="u-flex u-flex-1">
				<text>楼层高度</text>
				<text class="u-m-l-10">{{detail.floor_count}}层</text>
			</view>
			<view class="u-flex u-flex-1">
				<text>客房总量</text>
				<text class="u-m-l-10">{{detail.room_count}}间</text>
			</view>
		</view>
		<view class="u-flex u-m-l-25 u-m-r-25 m-font1 u-m-t-20">
			<text>{{detail.intro}}</text>
		</view>

	<!-- 	<view class="m-h3">
			<view class="m-h3-left">
				<text>资质证书</text>
			</view>
		</view>

		<view class="u-flex u-m-l-25 u-m-r-25 u-m-b-40">
			<image src="../../static/common/zhengshu.jpg" style="width: 100%;" mode="widthFix"></image>
		</view> -->
	</view>
</template>

<script>
	import {
		getHotelInfo
	} from "@/common/function/api_fun.js"
	export default {
		data() {
			return {
				detail: null
			};
		},
		onLoad(options) {
			this.getHotelInfo(options.id)
		},
		methods: {
			getHotelInfo(id) {
				getHotelInfo({
					marchant_id: id
				}).then((res) => {
					this.detail = res;
				})
			},
			makePhoneCall(phone){
				wx.makePhoneCall({
					phoneNumber:phone,
					success(){
						
					},
					fail() {
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.m-icon {
		display: flex;
		align-items: center;
		width: 26rpx;
		height: 26rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.m-font1 {
		font-size: 26rpx;
		color: #333;
	}

	.m-h3 {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 25rpx;

		.m-h3-left {
			font-size: 36rpx;
			color: #222;
			font-weight: 800;
		}

		.m-h3-right {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #999;
		}
	}

	.m-config-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 20%;
		font-size: 24rpx;
		color: #333;
		margin-top: 15rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-bottom: 10rpx;
		}
	}

	.m-config-item-width {
		width: 110rpx;
		text-align: center;
	}


	.m-cell {
		display: flex;
		margin-left: 25rpx;
		margin-right: 25rpx;
		height: 90rpx;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #2979ff;
	}
</style>
